<script name="search" setup>
import "@/utils/rem";
import { reactive, ref, onMounted } from "vue";
import { getReceiveList } from "@/api/h5/index.js";
import { showToast } from "vant";

const formData = reactive({
  mobile: "",
});
const list = ref([]);
const num = ref("");
const loading = ref(false);

const getInfo = async () => {
  const PReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  // /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
  if (!PReg.test(formData.mobile)) {
    showToast("手机号格式错误！");
    return false;
  }
  await getReceiveList({
    phoneNumber: formData.mobile,
  })
    .then((res) => {
      if (res.code == 200 && res.data.length) {
        // console.log(res);
        num.value = res.data.length;
        list.value = res.data;
      } else {
        showToast(`暂无相关数据`);
        list.value = [];
        num.value = "";
      }
    })
    .catch(() => {
      len.value = 0;
      list.value = [];
    })
    .finally(() => {
      loading.value = false;
    });
};

const onSubmit = async () => {
  await getInfo();
};

onMounted(() => {
  document.title = "领取记录查询";
});
</script>
<template>
  <div style="max-width: 750px; margin: 0 auto" class="bg">
    <div class="form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <h2
            style="
              font-size: 18px;
              padding: 0.2rem;
              text-align: center;
              font-weight: 700;
            "
          >
            查询您的领取记录
          </h2>
          <van-field
            v-model="formData.mobile"
            name="手机号"
            label="手机号"
            placeholder="请输入领取手机号"
          />

          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              查 询
            </van-button>
          </div>
        </van-cell-group>
      </van-form>
      <div v-if="num" style="overflow-y: auto; padding-bottom: 0.1rem">
        <p
          style="
            padding: 0.2rem;
            text-align: center;
            font-size: 14px;
            color: #fff;
          "
        >
          共查询有{{ num }}条记录
        </p>
        <van-cell-group inset v-for="item in list">
          <van-cell title="订单编号" :value="item.orderNo" />
          <van-cell title="领取时间" :value="parseTime(item.createTime)" />
          <van-cell title="领取权益" :value="item.equityName" />
          <van-cell title="领取手机号" :value="item.phoneNumber" />
          <!-- <van-cell title="领取金额" :value="item.receiveAmount" /> -->
          <van-cell>
            <template #title>
              <span class="custom-title">领取状态</span>
            </template>
            <template #value>
              <span class="custom-value" v-if="item.status == 1">下单中</span>
              <span class="custom-value" v-if="item.status == -1"
                >下单失败</span
              >
              <span class="custom-value" v-if="item.status == 2">下单成功</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.form {
  width: 7rem;
  height: 7rem;
  position: relative;
  top: 35%;
  left: 50%;
  margin-left: -3.5rem;
}
.bg {
  height: 100%;
  background: url("@/assets/images/ordersearch.png") no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
}
.orderlist {
  p {
    font-size: 12px;
    line-height: 1.5em;
    padding-left: 0.4rem;
  }
}
.mb {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
}
:deep(.van-popup--center.van-popup--round) {
  width: 80%;
}
:deep(.van-cell-group--inset) {
  margin-bottom: 0.1rem;
}
</style>
